<template>
  <div class="todo-container">
    <!-- 顶部区域 -->
    <div class="header">
      <div class="date-section">
        <span>今天也要努力学习！</span>
      </div>
      <div class="action-buttons">
        <a-button ghost type="primary">
          <template #icon>
            <calendar-outlined />
          </template>
          列表视图
        </a-button>
        <a-button ghost type="primary">
          <template #icon>
            <calendar-outlined />
          </template>
          日历视图
        </a-button>
        <a-button type="primary">
          <template #icon>
            <plus-outlined />
          </template>
          添加任务
        </a-button>
      </div>
    </div>

    <!-- 任务列表区域 -->
    <div class="task-list">
      <a-list :data-source="tasks" item-layout="horizontal">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="task-item">
              <!-- 图标 -->
              <span class="task-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightning-fill" viewBox="0 0 16 16">
                  <path d="M8.751.069a.5.5 0 0 1 .489.548l3.25 8.533a.5.5 0 1 1-.979.434L8.029 3.617l-1.78-4.238a.5.5 0 0 1 .951-.476l2.332 5.776-1.332-3.328zm-3.437 9.853a.5.5 0 0 1-.489-.548l-3.25-8.533a.5.5 0 0 1 .979-.434L7.971 12.383l1.78 4.238a.5.5 0 0 1-.951.476l-2.332-5.776 1.332 3.328z"/>
                </svg>
              </span>
              <!-- 标题 -->
              <span class="task-title">{{ item.title }}</span>
              <!-- 优先级标签 -->
              <span class="priority-tag">{{ item.priority }}</span>
              <!-- 状态标签 -->
              <span class="status-tag">{{ item.status }}</span>
              <!-- 操作按钮 -->
              <div class="actions">
                <a-button icon="check" shape="circle" size="large" type="primary" @click="handleComplete(item)">
                  完成
                </a-button>
                <a-button icon="delete" shape="circle" size="large" type="danger" @click="handleDelete(item)">
                  删除
                </a-button>
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { CalendarOutlined, PlusOutlined, CheckCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue';

// 当前日期
const currentDate = new Date().toLocaleDateString();

// 任务数据
const tasks = ref([
  {
    id: 1,
    title: '学习Redis',
    description: 'dfgdf',
    priority: '中优先级',
    status: '待完成',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  },
]);

// 完成任务
const handleComplete = (task) => {
  console.log('完成任务:', task);
};

// 删除任务
const handleDelete = (task) => {
  console.log('删除任务:', task);
};
</script>

<style scoped>
.todo-container {
  padding: 20px;
  background: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .date-section {
      display: flex;
      align-items: center;
    }

    .action-buttons {
      display: flex;
      gap: 10px;
    }
  }

  .task-list {
    max-height: 500px;
    overflow-y: auto;

    .ant-list-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #e8e8e8;

      &:last-child {
        border-bottom: none;
      }
    }

    .task-item {
      display: flex;
      align-items: center;
      gap: 10px;

      .task-icon {
        color: orange;
        font-size: 20px;
      }

      .task-title {
        font-size: 16px;
        font-weight: bold;
      }

      .priority-tag {
        background-color: #ff9900; /* 调整为橙色 */
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }

      .status-tag {
        background-color: #1890ff; /* 调整为蓝色 */
        color: white;
        padding: 4px 8px;
        border-radius: 20px; /* 调整为椭圆形 */
        font-size: 12px;
      }

      .actions {
        display: flex;
        gap: 10px;
        margin-left: auto; /* 将按钮靠右对齐 */

        .ant-btn-primary {
          color: white; /* 完成按钮文字颜色 */
        }

        .ant-btn-danger {
          color: white; /* 删除按钮文字颜色 */
        }
      }
    }
  }
}
</style>